<template>
  <div class="home">
    <h1>this is Home page</h1>
    <p>{{ msg }}<input type="text" v-model="msg"></p>
    <Toast />
    <p>{{ obj }}<input type="text" v-model="obj.name"></p>
    <p>{{ arr }}<input type="text" v-model="arr[1].n"></p>
    <p><span class="pSpan">{{ title }}</span><input type="text" v-model="title"></p>
    <Test />
  </div>
</template>

<script>
export default {
  name: 'HomeView',
  data() {
    return {
      msg : "hello world",
      obj : { name:"admin", age:18 },
      arr : [{n:0},{n:1},{n:2}],
      title : "hello"
    }
  },
  watch:{
    msg:function(newVal, oldVal){
      console.log(newVal, oldVal)
    },
    obj(newVal, oldVal){
      console.log(newVal, oldVal)
    },
    arr: {
      handler:function(newVal, oldVal){
        console.log(newVal, oldVal)
        // 如果是深度侦听，此时的新值和老值完全相等
        console.log(newVal === oldVal)
      },
      deep: true,
      immediate: true
    },
    "obj.name"(newVal, oldVal){
      console.log(newVal, oldVal)
    },
    "arr.1.n"(newVal, oldVal){
      console.log(newVal, oldVal)
    },
    title:{
      handler(newVal, oldVal){
        // console.log(newVal, oldVal)
        console.log(document.querySelector(".pSpan").innerText);
      },
      flush: "post"
    }
  }
}
</script>
